<script>
/**
 * 创建期：
 * beforeCreate：组件创建前
 * created：组件创建后
 * 挂载期：
 * beforeMount：组件渲染前
 * mounted：组件渲染后,显示在页面上
 * 更新期：
 * beforeUpdate：组件数据更新前
 * updated：组件数据更新后，数据显示在页面上
 * 销毁期：
 * beforeUnmount：组件卸载前
 * unmounted：组件卸载后
 * 异常捕获：
 * errorCaptured (仅在捕获错误时触发)
 */
export default {
  //created后被初始化数据
  data() {
    return {
      str: '数据'
    }
  },
  methods: {
    myClick() {
      this.str = '数据1'
    },
  },
  beforeCreate() {
    console.log('组件创建前，读取不到页面='+this.$refs.myPObj+'，读取不到data数据='+this.str)
  },
  created() {//进行数据加载网络请求
    console.log('组件创建后，读取不到页面='+this.$refs.myPObj+'，读取到data数据='+this.str)
  },
  beforeMount() {//进行数据加载网络请求
    console.log('组件渲染前，读取不到页面='+this.$refs.myPObj)
  },
  mounted() {//进行数据加载网络请求
    console.log('组件渲染后,显示在页面上,读取到页面='+this.$refs.myPObj)
  },
  beforeUpdate() {
    console.log('组件数据更新前')
  },
  updated() {
    console.log('组件数据更新后')
  },
  beforeUnmount() {
    console.log('组件卸载前')
  },
  unmounted() {
    console.log('组件卸载后')
  }
}
</script>
<template>
  <p ref="myPObj">{{str}}</p>
  <button @click="myClick">修改数据</button>
</template>